<template>
    <div class="loading">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>
        <el-input type="text"></el-input>
        <button @click="onClick">调用loading</button>
        <br />
        <h3>样式穿透</h3>
        <div>
            <li>
                使用 /deep/ 和 '>>>' 已被弃用 推荐使用:deep()代替
                <br />/deep/ input {
                <br />background: red;
                <br />}
                <br />
            </li>
            <li>
                官方推荐
                <br />:deep(input) {
                <br />background: greenyellow;
                <br />}
                <br />
            </li>
        </div>
    </div>
</template>
<script lang='ts' setup>

import { getCurrentInstance, ComponentInternalInstance } from 'vue'
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
// 结构出全局配置appContext
const { appContext } = getCurrentInstance() as ComponentInternalInstance
const onClick = () => {
    // console.log(appContext);

    appContext.config.globalProperties.$$loading.show()
    setTimeout(() => {
        appContext.config.globalProperties.$$loading.hide();
    }, 3000)
}
</script>
<style lang='less' scoped>
.loading {
    //  使用 /deep/ 和 >>> vite 会发出警告
    // /deep/ input {
    //     background: red;
    // }

    :deep(input) {
        background: greenyellow;
    }
    // >>> input {
    //     background: yellow;
    // }
}
</style>
